<template>
  <div class="page flex-col justify-between">
    <div class="image-wrapper_1 flex-col">
      <img class="image_1" referrerpolicy="no-referrer" src="./assets/img/a3cd7d6d80f2e63ed81d79b9283d6bd6.png" />
    </div>
    <img class="image_2" referrerpolicy="no-referrer" src="./assets/img/231b7831a0ece6655273b8d56581d245.png" />
    <img class="image_3" referrerpolicy="no-referrer" src="./assets/img/f247d95ec2bdd8ac453fcbc7908e2790.png" />
    <div class="section_1 flex-col">
      <div class="group_1 flex-col">
        <div class="image-wrapper_2 flex-col">
          <img class="image_4" referrerpolicy="no-referrer" src="./assets/img/d1b8767baaa7e6c1488ebc2a4af30fb1.png" />
          <img class="image_5" referrerpolicy="no-referrer" src="./assets/img/54c2bf9d88c2e799ddbb61acf36c3e09.png" />
        </div>
        <span class="text_1">实时监控大屏管理系统</span>
      </div>
      <img class="image_6" referrerpolicy="no-referrer" src="./assets/img/6ac2fa57816e6794ea95179ad41b7708.png" />
      <div class="image-wrapper_3 flex-col">
        <img class="thumbnail_1" referrerpolicy="no-referrer" src="./assets/img/9836827576f11609588ffd36e750ca32.png" />
      </div>
      <div class="image-wrapper_4 flex-col">
        <img class="thumbnail_2" referrerpolicy="no-referrer" src="./assets/img/18a52880757a8fffa9a312b6014ab61e.png" />
      </div>
    </div>
    <div class="section_2 flex-col">
      <div class="text-wrapper_14 flex-row">
        <!-- <span class="paragraph_1">
          2025-04-16
          <br />
          &nbsp;15:58:53
        </span> -->
      </div>
      <div class="group_56 flex-row">
        <div class="group_2 flex-row">
          <span class="text_2">工站-抽真空</span>
          <div class="group_3 flex-col"></div>
          <div class="group_4 flex-col"></div>
        </div>
        <div class="group_5 flex-col"></div>
        <div class="group_6 flex-col"></div>
        <div class="group_7 flex-col"></div>
        <div class="group_8 flex-row">
          <span class="text_3">工站-冷媒冲注&amp;工站-卤素检测</span>
          <div class="section_3 flex-col"></div>
        </div>
        <div class="group_9 flex-col"></div>
        <div class="group_10 flex-col"></div>
        <div class="group_11 flex-col"></div>
        <div class="group_12 flex-col"></div>
      </div>
      <div class="group_57 flex-row justify-between">
        <div class="block_22 flex-col justify-between">
          <div class="box_34 flex-row">
            <span class="text_4">在途加工数量(个)</span>
            <img class="image_9" referrerpolicy="no-referrer" src="./assets/img/3b628975aad8f277dbe5bb3eeb59108c.png" />
            <!-- <div class="group_13 flex-col"></div> -->
          </div>
          <img class="image_30" referrerpolicy="no-referrer" src="./assets/img/41b0ccd412ad3a99eb1c8f38215f4dac.png" />
        </div>
        <div class="section_5 flex-col justify-end">
          <div class="box_35 flex-row justify-between">
            <div class="box_36 flex-col">
              <div class="group_21 flex-col"></div>
              <div class="group_22 flex-col"></div>
            </div>
            <img class="image_13" referrerpolicy="no-referrer"
              src="./assets/img/f81dc0e3aeb5f0882a75ab23ac5d1bee.png" />
          </div>
          <div class="box_13 flex-col">
            <div class="block_11 flex-col"></div>
            <div class="block_12 flex-col"></div>
          </div>
          <div class="box_14 flex-col">
            <div class="block_23 flex-row justify-between">
              <div class="image-wrapper_10 flex-col">
                <img class="thumbnail_7" referrerpolicy="no-referrer"
                  src="./assets/img/f8e45fc050be35de01b5fe3d3685dcb8.png" />
              </div>
              <div class="image-wrapper_11 flex-col">
                <img class="thumbnail_8" referrerpolicy="no-referrer"
                  src="./assets/img/1ae51ba914329474235c03dfb77bd278.png" />
              </div>
            </div>
            <div class="block_24 flex-row">
              <div class="group_30 flex-col"></div>
              <div class="text-wrapper_15 flex-col justify-between">
                <span class="text_39">冷媒冲注加工量</span>
                <span class="text_40">240</span>
              </div>
              <img class="image_15" referrerpolicy="no-referrer"
                src="./assets/img/d14b0a0aa3d110e4d99c107ed465561c.png" />
            </div>
            <div class="block_25 flex-row justify-between">
              <div class="image-wrapper_12 flex-col">
                <img class="thumbnail_9" referrerpolicy="no-referrer"
                  src="./assets/img/11602ce9236b175ac51cd1f5b871fc38.png" />
              </div>
              <div class="image-wrapper_13 flex-col">
                <img class="thumbnail_10" referrerpolicy="no-referrer"
                  src="./assets/img/44c16858c671bfd1ff5d0ad54b80f240.png" />
              </div>
            </div>
            <img class="image_14" referrerpolicy="no-referrer"
              src="./assets/img/b5803d06a4bcd6841b4dab265a2804f4.png" />
          </div>
          <div class="box_15 flex-col">
            <div class="box_37 flex-row justify-between">
              <div class="image-wrapper_14 flex-col">
                <img class="thumbnail_11" referrerpolicy="no-referrer"
                  src="./assets/img/554e89d3b5bfe27ddf71807ac3f7d1b8.png" />
              </div>
              <div class="image-wrapper_15 flex-col">
                <img class="thumbnail_12" referrerpolicy="no-referrer"
                  src="./assets/img/cb27ebad93c710fbc14f8e331f28c9df.png" />
              </div>
            </div>
            <div class="box_38 flex-row justify-between">
              <div class="group_58 flex-col justify-between">
                <div class="image-text_4 flex-row justify-between">
                  <div class="box_17 flex-col"></div>
                  <span class="text-group_1">卤素检漏工作量</span>
                </div>
                <span class="text_41">235</span>
              </div>
              <img class="image_17" referrerpolicy="no-referrer"
                src="./assets/img/6ba9155094630ebe674722bcc2f18396.png" />
            </div>
            <div class="box_39 flex-row justify-between">
              <div class="image-wrapper_16 flex-col">
                <img class="thumbnail_13" referrerpolicy="no-referrer"
                  src="./assets/img/dbf3542d9edfa05749ac226134f9c741.png" />
              </div>
              <div class="image-wrapper_17 flex-col">
                <img class="thumbnail_14" referrerpolicy="no-referrer"
                  src="./assets/img/f83dd7862ebdfb2f932eac900e432d8b.png" />
              </div>
            </div>
            <img class="image_16" referrerpolicy="no-referrer"
              src="./assets/img/9bc4864697337b9a0a691f782257b55c.png" />
          </div>
        </div>
      </div>
      <div class="group_59 flex-row">
        <div class="group_35 flex-row">
          <span class="text_42">工站-商检</span>
          <div class="block_13 flex-col"></div>
          <div class="block_14 flex-col"></div>
        </div>
        <div class="group_36 flex-col"></div>
        <div class="group_37 flex-col"></div>
        <div class="group_38 flex-col"></div>
        <div class="group_39 flex-row">
          <span class="text_43">工站-静音检测</span>
          <div class="box_19 flex-col"></div>
          <div class="box_20 flex-col"></div>
        </div>
        <div class="group_40 flex-col"></div>
        <div class="group_41 flex-col"></div>
        <div class="group_42 flex-col"></div>
      </div>
      <div class="group_60 flex-row">
        <span class="text_44">在途加工数量(个)</span>
        <img class="image_20" referrerpolicy="no-referrer" src="./assets/img/bbd440f8afa6701735497c3c4d916ac9.png" />
        <div class="section_9 flex-col"></div>
        <span class="text_62">在途加工数量(个)</span>
        <img class="image_26" referrerpolicy="no-referrer" src="./assets/img/3de7e4b406c37ba0b0177e4cf33de394.png" />
        <!-- <div class="box_32 flex-col"></div> -->
      </div>
      <div class="image-wrapper_28 flex-row justify-between">
        <img class="image_31" referrerpolicy="no-referrer" src="./assets/img/e8728b6027542e78f9cc5faf498cd84b.png" />
        <img class="image_32" referrerpolicy="no-referrer" src="./assets/img/e14d4019df4e120d540b0de92a8894d4.png" />
      </div>
      <div class="box_8 flex-col">
        <div class="group_61 flex-row justify-between">
          <div class="image-wrapper_6 flex-col">
            <img class="thumbnail_3" referrerpolicy="no-referrer"
              src="./assets/img/104dd2135f197072a056c33b4326c02e.png" />
          </div>
          <div class="image-wrapper_7 flex-col">
            <img class="thumbnail_4" referrerpolicy="no-referrer"
              src="./assets/img/b8a9ad6004e5a54f92cf195f17887c51.png" />
          </div>
        </div>
        <div class="group_62 flex-row">
          <img class="image_11" referrerpolicy="no-referrer" src="./assets/img/11a1a94df25ca3897c82765adfa6699b.png" />
          <div class="group_19 flex-col"></div>
          <span class="text_21">总产量</span>
          <span class="text_22">280</span>
        </div>
        <div class="group_63 flex-row justify-between">
          <div class="image-wrapper_8 flex-col">
            <img class="thumbnail_5" referrerpolicy="no-referrer"
              src="./assets/img/b4339dc958a511ed30d276e18aacf5d7.png" />
          </div>
          <div class="image-wrapper_9 flex-col">
            <img class="thumbnail_6" referrerpolicy="no-referrer"
              src="./assets/img/3163555b2f95f1f845a0c1665daa60d5.png" />
          </div>
        </div>
      </div>
      <div class="section_12 flex-col">
        <div class="box_40 flex-row justify-between">
          <div class="image-wrapper_19 flex-col">
            <img class="thumbnail_15" referrerpolicy="no-referrer"
              src="./assets/img/ec5b31fa67f69f1e24904d4705c42fcf.png" />
          </div>
          <div class="image-wrapper_20 flex-col">
            <img class="thumbnail_16" referrerpolicy="no-referrer"
              src="./assets/img/d9da8ec1708e3cbaf816c662d35904cd.png" />
          </div>
        </div>
        <div class="box_41 flex-row">
          <img class="image_22" referrerpolicy="no-referrer" src="./assets/img/c1b557ec07873b66a49152b56d594eff.png" />
          <div class="image-text_5 flex-row justify-between">
            <div class="box_30 flex-col"></div>
            <span class="text-group_2">总产量</span>
          </div>
          <span class="text_61">555</span>
          <!-- <img class="image_23" referrerpolicy="no-referrer" src="./assets/img/c799596f0f387b61706d0a6c0f470de8.png" /> -->
        </div>
        <div class="box_42 flex-row justify-between">
          <div class="image-wrapper_21 flex-col">
            <img class="thumbnail_17" referrerpolicy="no-referrer"
              src="./assets/img/2d7b44e878e95dbc943c5505e23497c7.png" />
          </div>
          <div class="image-wrapper_22 flex-col">
            <img class="thumbnail_18" referrerpolicy="no-referrer"
              src="./assets/img/b98fdf759c112d652af979c346e65466.png" />
          </div>
        </div>
      </div>
      <div class="group_52 flex-col">
        <div class="group_64 flex-row">
          <img class="image_28" referrerpolicy="no-referrer" src="./assets/img/a33e6ce110ebe214191e35542bfc55ea.png" />
          <div class="image-text_6 flex-row justify-between">
            <div class="group_54 flex-col"></div>
            <span class="text-group_3">总产量</span>
          </div>
          <span class="text_79">963</span>
          <img class="image_29" referrerpolicy="no-referrer" src="./assets/img/88fa24f31377ed7b77908293fec908a1.png" />
        </div>
        <div class="group_65 flex-row justify-between">
          <div class="image-wrapper_24 flex-col">
            <img class="thumbnail_19" referrerpolicy="no-referrer"
              src="./assets/img/fc1f5455f31f8ddd3f8e35ad404b1ed7.png" />
          </div>
          <div class="image-wrapper_25 flex-col">
            <img class="thumbnail_20" referrerpolicy="no-referrer"
              src="./assets/img/351dbf40d11ff0b8476ce81d416007a4.png" />
          </div>
        </div>
        <div class="image-wrapper_26 flex-col">
          <img class="thumbnail_21" referrerpolicy="no-referrer"
            src="./assets/img/935ea487c0785000bd571b4fc1cd7e9d.png" />
        </div>
        <div class="image-wrapper_27 flex-col">
          <img class="thumbnail_22" referrerpolicy="no-referrer"
            src="./assets/img/aa2a399bea52034bc711b128530a5c74.png" />
        </div>
      </div>
    </div>

    <!-- disk1 -->
    <disk class="disk1" :num="130"/>
    <disk class="disk2" :num="200"/>
    <disk class="disk3" :num="792"/>


    <div class="charts1">
      <columnEcharts type="count" :qualified="250" :unqualified="30" />
    </div>
    <div class="charts2">
      <columnEcharts type="rate" :qualified="95" :unqualified="5" />
    </div>
     <div class="charts3">
      <columnEcharts type="count" :qualified="500" :unqualified="120" />
    </div>
     <div class="charts4">
      <columnEcharts type="rate" :qualified="80" :unqualified="20" />
    </div>


     <div class="charts5">
      <columnEcharts type="count" :qualified="532" :unqualified="22" />
    </div>
     <div class="charts6">
      <columnEcharts type="rate" :qualified="97" :unqualified="3" />
    </div>

     <div class="charts7">
      <columnEcharts type="count" :qualified="933" :unqualified="30" />
    </div>
     <div class="charts8">
      <columnEcharts type="rate" :qualified="97" :unqualified="3" />
    </div>


  </div>
</template>
<script>
import disk from './part/disk.vue';
import columnEcharts from './part/columnEcharts.vue';

export default {
  components: {
    disk,
    columnEcharts
  },
  data() {
    return {
      constants: {}
    };
  },
  methods: {}
};
</script>
<style scoped lang="scss" src="./assets/index.scss" />
<style lang="scss">
.disk1 {
  position: absolute;
  top: 233px;
  left: 35px;
}
.disk2 {
  position: absolute;
  bottom: 140px;
  left: 35px;
}
.disk3 {
  position: absolute;
  bottom: 140px;
  right: 610px;
}

.charts1 {
  position: absolute;
  top: 267px;
  left: 431px;
  width: 230px;
  height: 260px;
}

.charts2 {
  position: absolute;
  top: 267px;
  left: 681px;
  width: 230px;
  height: 260px;
}

.charts3 {
  position: absolute;
  top: 267px;
  right: 335px;
  width: 230px;
  height: 260px;
}

.charts4 {
  position: absolute;
  top: 267px;
  right: 70px;
  width: 230px;
  height: 260px;
}
.charts5 {
  position: absolute;
  bottom: 60px;
  left: 422px;
  width: 230px;
  height: 260px;
}
.charts6 {
  position: absolute;
  bottom: 60px;
  left: 666px;
  width: 230px;
  height: 260px;
}
.charts7 {
  position: absolute;
  bottom: 60px;
  right: 335px;
  width: 230px;
  height: 260px;
}
.charts8 {
  position: absolute;
  bottom: 60px;
  right: 70px;
  width: 230px;
  height: 260px;
}
</style>